<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">

	<link rel="stylesheet" href="css/head.css" />
	<link rel="stylesheet" type="text/css" href="css/login.css" />
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="layui/layui.js"></script>
	<script src="js/plugins/js-cookie/js.cookie.min.js"></script>
</head>

<body>
<div class="dvhead">
<div class="dvlogo"><a href="index.html">你问我答</a></div>
	<div class="dvsearch">10秒钟<a href="register.html">注册</a>账号，找到你的同学</div>
<div class="dvreg">
	已有账号，立即&nbsp;<a href="login.html">登录</a>
</div>
</div>
	<section  class="sec">
		<form action="/users/login" method="post" id="loginForm">
			<div class="register-box">
				<label  class="username_label">
				用户名
				<input maxlength="20" name="username" type="text"
					placeholder="您的用户名和登录名" />
			</label>
				<div class="tips">
				</div>
			</div>
			<div class="register-box">
				<label class="username_label">
				密  码
				<input type="password" name="password"
					placeholder="请输入密码" />
			</label>
				<div class="tips">

				</div>
			</div>
			<div class="register-box">
				<label for="code" class="username_label">
				验证码
				<input maxlength="20" type="text" placeholder="请输入验证码"  id="inputCode" name="code"/>
			</label>
				<span id="code"></span>

			</div>
			<div class="arguement">
						<input type="checkbox" id="read" /> 阅读并同意
				<a href="javascript:void(0)">《你问我答用户注册协议》</a>
				<a href="register.html">没有账号,立即注册</a>
				<div class="tips">
				</div>
			</div>
			<div class="submit_btn">
				<button type="button" id="submit_btn">
				立即登录
			</button>
			</div>
		</form>
	</section>
	<script>
		let code; //验证码
		function refreshCode(){
			$.get("/verifyCodes/login?t=" + new Date().getTime(), function (data) {
				$("#code").text(data);
				code = data;
			})
		}
		refreshCode();
		//验证码
		$("#code").click(function () {
			refreshCode();
		})
		layui.use(['layer', 'form'], function(){
			var layer = layui.layer,form = layui.form;
			$("#submit_btn").click(function () {
				//验证码校验
				if($("#inputCode").val().toLowerCase()!= code.toLowerCase()){
					layer.msg("验证码错误~");
					return;
				}

				//阅读协议
				if(!$("#read").is(':checked')){
					layer.msg("请勾选协议");
					return;
				}

				$.post("/users/login", $("#loginForm").serialize(), function (data) {
					if(data.code == 200){
						//缓存用户信息
						Cookies.set('user', JSON.stringify(data.data), { expires: 30,path:'/'});
						window.location.href = "/"
					}else{
						layer.msg(data.msg);
					}
				})
			})
		});
	</script>

</body>